<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>局部组件</title>
  </head>
  <body>
    <div id="app1">
      <he-he></he-he>
      <ha-ha></ha-ha>
    </div>
    
    <div id="app2">
      <he-he></he-he>
      <!-- 这里不能使用 app1 中的局部组件 -->
      <!-- <ha-ha></ha-ha> -->
    </div>

    <script src="../vue.js"></script>
    <script>
      // 全局组件
      Vue.component('HeHe', {
        template: `
          <div>heheda</div>
        `,
      });

      var app1 = new Vue({
        el: '#app1',
        // 局部组件注册到 components 选项中
        components: {
          HaHa: {
            template: `
              <div>
                haha
                <br>
                <!-- 组件之间是允许嵌套组合的（前提：作用域能够访问到） -->
                <he-he></he-he>
              </div>
            `,
          },
        },
      });

      var app2 = new Vue({
        el: '#app2',
      });
    </script>
  </body>
</html>
